<style lang="scss" scoped>
.customer {
  .el-form-item {
    width: 100%;
  }
}
</style>
<template>
  <div class="customer">
    <!-- 导出 -->
    <el-row class="import_global">
      <el-button type="warning" icon="el-icon-download" size="small" round>
        新增
      </el-button>
    </el-row>
    <!-- 预览 -->
    <pdf-com
      src="/20220730152312935163.pdf"
      title="pdf"
      :visibleProp="pdfVisible"
      @close="pdfVisible = false"
    />
    <!-- 查询 -->
    <el-input
      placeholder="中文名/英文名/联系人/联系电话/Email"
      prefix-icon="el-icon-search"
      v-model="form.user" />
    <!-- 表格列表 -->
    <table-com
      ref="table"
      api="/order/queryList"
      :column="column"
      :params="{}"
      :config="{ getList }"
      @row-click="rowClick"
    >
      <template v-slot="{ prop, row, column }">
        <div class="list" v-if="column.label !== '操作'">
          <template v-if="showList[row.id]">
            <el-row v-for="(item, index) in column.child" :key="index">
              <div>{{ row[prop][item.prop] || '-' }}</div>
              <div>{{ item.label }}</div>
            </el-row>
            <div v-if="prop === 'orderInfo'">
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
                >编辑</el-button
              >
            </div>
          </template>
          <template v-else>
            <el-row
              v-for="(item, index) in column.child.slice(0, 1)"
              :key="index"
            >
              <div>{{ row[prop][item.prop] || '-' }}</div>
              <div>{{ item.label }}</div>
            </el-row>
          </template>
        </div>
        <template v-else>
          <el-button
            type="text"
            @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
            >编辑</el-button
          >
          <el-button
            type="text"
            class="ml_10"
            @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
            >删除</el-button
          >
        </template>
      </template>
    </table-com>
    <!-- 编辑 -->
    <edit-tab :visibleProp="editVisible" title="编辑客户"  @close="editVisible = false">
      <template #baseInfo>
        <el-form
          ref="editForm"
          :model="editForm"
          label-width="90px"
          :rules="rules"
          style="width: 400px"
        >
          <el-row>
            <el-form-item label="名字" prop="startShipmentCountry">
              <el-input v-model="editForm.startShipmentCountry" placeholder="请输入企业/个人名字" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="英文名">
              <el-input v-model="editForm.destCountry" placeholder="请输入企业/个人英文名" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="简称">
              <el-input v-model="editForm.tradeCountry" placeholder="请输入企业/个人简称" />
            </el-form-item>
          </el-row>
          <el-row type="flex">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="editForm.ladingNo" placeholder="请输入备注" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否常用" prop="cabinetNo">
              <el-radio-group v-model="radio">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
    </edit-tab>
  </div>
</template>

<script>
import EditTab from './EditTab.vue'
import PdfCom from '@/components/PdfCom.vue'

export default {
  name: 'Customer',
  components: {
    PdfCom,
    EditTab
  },
  data() {
    return {
      form: {
        user: '',
        name: ''
      },
      editForm: {
        startShipmentCountry: '',
        destCountry: '',
        tradeCountry: '',
        ladingNo: '',
        cabinetNo: '',
        sealNo: '',
        declarationNo: '',
        tariffNo: '',
        declareDate: '',
        vatNo: ''
      },
      column: [
        {
          label: '订单',
          prop: 'orderInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '提运号', prop: 'ladingNo' },
            { label: '报关单单号', prop: 'declarationNo' },
            { label: '关税税号', prop: 'tariffNo' },
            { label: '增值税税号', prop: 'vatNo' },
            { label: '启运国', prop: 'startShipmentCountry' },
            { label: '贸易国', prop: 'tradeCountry' },
            { label: '目的国', prop: 'destCountry' }
          ]
        },
        {
          label: '收发货单位',
          prop: 'addressInfo',
          minWidth: '120',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '货物代理人', prop: 'goodsProxy' },
            { label: '货物接收人', prop: 'goodsReceiver' },
            { label: '申报单位名称', prop: 'declareCompanyName' },
            { label: '收货单位名称', prop: 'receiveCompanyName' },
            { label: '发货单位名称', prop: 'deliverCompanyName' },
            { label: '消费单位名称', prop: 'consumeCompanyName' }
          ]
        },
        {
          label: '核销',
          prop: 'cancelVerificationInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '许可证编号', prop: 'licenseNo' }
          ]
        },
        {
          label: '结算',
          prop: 'settlementInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '总关税金额', prop: 'tariffAmount' },
            { label: '总增值税金额', prop: 'addValueTaxAmount' },
            { label: '总税额', prop: 'sumTaxAmount' }
          ]
        },
        {
          label: '文件',
          prop: 'fileInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '文件类型', prop: 'fileType' },
            { label: '', prop: 'fileShowName' }
          ]
        },
        {
          label: '操作',
          slot: true
        }
      ],
      editVisible: true,
      pdfVisible: false,
      showList: [],
      rules: {
        startShipmentCountry: { required: true, message: '请输入名字', trigger: 'blur' },
      }
    }
  },
  methods: {
    onQuery() {
      this.$refs.table.fetch(1)
    },
    rowClick(row) {
      this.$set(this.showList, row.id, !this.showList[row.id])
    },
    getList(list) {
      list.forEach(() => {
        this.showList.push(false)
      })
    }
  },
  mounted() {
    this.onQuery()
  }
}
</script>
